<template>
  <!-- <view class="page-info">
    <view class="header">
        <view class="avatar"><u-avatar :src="user.avatarUrl" size="140" ></u-avatar></view>
        <view class="nickname">{{user.nickName}}</view>
    </view>
    <view class="menus">
  
          
        <view class="menu" bindtap="bindMyHistory" >
            <view class="left" @click="handleGoAnswerPage(user.id)">
            <image class="icon" style="background-color: #eeeeee;" mode="aspectFill" src="http://file.xiaomutong.com.cn/20200206/recordicon.png"></image>
            <text class="title">答题记录</text>
            </view>
            <view class="arraw">></view>
        </view>  
             

    </view>

  </view>-->
  <view>
    <view class="page-info">
      <view class="header">
        <view class="avatar">
          <u-avatar :src="user.avatarUrl" size="140"></u-avatar>
        </view>
        <view v-if="user.nickName != null">
        <view class="nickname">{{user.nickName}}</view>
        </view>
        <view v-else>
           <view class="nickname">你尚未登录,请登录!</view>
        </view>
        
      </view>

      <view class="cu-bar bg-white solid-bottom margin-top">
        <view class="action">
          <text class="cuIcon-title text-orange"></text>我的
        </view>
      </view>

      <view class="cu-list grid" :class="['col-' + 3,false?'':'no-border']">
        <view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<3*2">

          <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]" @tap="hadnleGoUrl(item.url)">
            <view class="cu-tag badge" v-if="item.badge!=0">
              <block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
            </view>
          </view>
          <text>{{item.name}}</text>
        </view>
      </view>

       <view class="btn_wrap" v-if="user.id==null">
          <button @click="clickQuit" type="primary" >登录</button>
        </view>
        <view class="btn_wrap" v-else>
          <button @click="clickQuit" type="primary" >退出登录</button>
        </view>
    </view>
   
  </view>
</template>

<script>
export default {
  onLoad() {
    console.log(uni.getStorageSync("user"));
    this.user = uni.getStorageSync("user");
  },
  methods: {
    clickQuit(){
       uni.removeStorageSync('user');
       console.log(uni.getStorageSync("user"));
       console.log("--------------------------");
       
       uni.redirectTo({
         url:"/pages/login/index"
       })
    },
    handleGoAnswerPage(id) {
      console.log("id:" + id);
    },
    swithBar(myUrl){
       uni.switchTab({
        url:myUrl
      })
    },
    hadnleGoUrl(myUrl){
      uni.navigateTo({
        url:myUrl,
        fail: this.swithBar(myUrl)
      })
     
    }
  },
  data() {
    return {
      user: {},
      cuIconList: [
        {
          cuIcon: "noticefill",
          color: "red",
          name: "答题记录",
          badge: 120,
          url: "/pages/records/index"
        },
        {
          cuIcon: "noticefill",
          color: "blue",
          name: "我的班级",
          badge: 120,
          url: "/pages/class/index"
        },
        {
          cuIcon: "noticefill",
          color: "green",
          name: "我的课程",
          badge: 120,
          url: "/pages/courses/index"
        },
        {
          cuIcon: "noticefill",
          color: "pink",
          name: "登录记录",
          badge: 120,
          url: "/pages/loginRecord/index"
        }
      ]
    };
  }
};
</script>

<style>
.page-info {
  width: 98%;
  margin: 0 auto;
  height: -webkit-fill-available;
  background-color: #f0f0f0;
  text-align: center;
  padding-top: 2px;
}
.page-info .header {
  background: #fff;
  height: 150px;
  display: flex;
  flex-direction: box;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.page-info .header .avatar {
  /* width: 75px;
    padding-left: 10px; */
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  padding-left: 20rpx;
}
.page-info .header .avatar .avatarimage {
  width: 75px;
  height: 75px;
  border-radius: 10px;
}
.page-info .header .nickname {
  font-size: 18px;
  padding-left: 10px;
}
.page-info .menus {
  margin-top: 10px;
}
.page-info .menus .menu {
  display: flex;
  flex-direction: box;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1px;
  padding-left: 10px;
  text-align: left;
  background: #fff;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}
.page-info .menu .left {
  width: 90%;
  display: flex;
  flex-direction: box;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.page-info .menu .icon {
  width: 32px;
  height: 32px;
}
.page-info .menu .title {
  padding-left: 10px;
}
.page-info .menu .arraw {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  padding-right: 16px;
  display: inline-block;
  color: #b2b2b2;
}
.btn_wrap{
  padding: 20rpx 10rpx;

}
</style>